<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/dist/include-openlayers-local.js"></script>
  </head>
  <body>
    <button onclick="moveToshenyang()">旋转到沈阳</button>
    <button onclick="rotatewuhan()">围绕武汉旋转</button>
    <button onclick="flyToguangzhou()">飞行定位到广州</button>
    <div id="map"></div>
    <script>
      const gaodeMapLayer = new ol.layer.Tile({
        title: '高德地图',
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false
        })
      })
      const map = new ol.Map({
        target: 'map',
        view: new ol.View({
          // projection: 'EPSG:4326',
          center: [11635617.0761, 3552110.0444],
          zoom: 6
        }),
        layers: [gaodeMapLayer]
      })
      var shenyang = ol.proj.fromLonLat([123.24, 41.5])
      var beijing = ol.proj.fromLonLat([116.28, 39.54])
      var shanghai = ol.proj.fromLonLat([121.29, 31.14])
      var wuhan = ol.proj.fromLonLat([114.21, 30.37])
      var guangzhou = ol.proj.fromLonLat([113.15, 23.08])
      var haikou = ol.proj.fromLonLat([110.2, 20.02])
      var view = map.getView()
      function moveToshenyang() {
        var center = view.getCenter()
        view.animate(
          {
            center: [center[0] + (shenyang[0] - shenyang[0]) / 2, center[1] + (shenyang[1] - shenyang[1]) / 2],
            rotation: Math.PI,
            easing: ol.easing.easeIn,
            duration: 2000,
            zoom: 7
          },
          {
            center: shenyang, //动画结束时的视图中心
            rotation: 2 * Math.PI, //动画结束时的旋转角度，即360度回正
            easing: ol.easing.easeOut,
            duration: 2000,
            zoom: 7
          }
        )
      }
      function rotatewuhan() {
        var rotation = view.getRotation()
        view.animate(
          //第一个过程
          {
            rotation: rotation + Math.PI, //第一次动画旋转角度
            anchor: wuhan, //自旋的中心点，即武汉
            easing: ol.easing.easeIn ////按每一帧动画控制的动画速度，即开始缓慢并逐渐加快速度
          },
          //第二个过程
          {
            rotation: rotation + 2 * Math.PI, //动画结束时的旋转角度，即360度回正
            anchor: wuhan, // 旋转中心点
            easing: ol.easing.easeOut ///按每一帧动画控制的动画速度，即开始快速并逐渐减速
          }
        )
      }
      function flyToguangzhou() {
        var center = view.getCenter()
        view.animate(
          {
            center: [center[0] + (guangzhou[0] - guangzhou[0]) / 2, center[1] + (guangzhou[1] - guangzhou[1]) / 2],
            duration: 2000,
            zoom: 6
          },
          {
            center: guangzhou,
            duration: 2000,
            zoom: 8
          }
        )
      }
    </script>
  </body>
</html>
